<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 表单 form <form> 标签用于为用户输入出啊关键HTML 表单.作用: 表单用于向服务器传输数据-->
    <!-- action URL 规定当提交表单时向何处发送表单数据(服务器的地址) -->
    <!-- method="get/post" 客户端向服务器端发送请求的方式(1.ger会暴露表单的数据不安全 2.post 可以隐藏表单数据安全) -->
    <form action="" method="POST">
         <!-- 表单元素 <input> 标签用于搜集用户信息.根据不同的 type 属性值,输入字段拥有很多种形式-->
         <!-- 注意: 每个表单元素都要设置一个name属性,用于后台提取表单中的数据 -->
         <!-- 
             常用的属性：
             1.value 属性规定输入字段的初始值
             2.placeholder 文本提示信息
             3.readonly 属性规定输入字段为只读。
             4.size 属性规定输入字段的宽度。
             5.required 必填
          -->
         用户名<input type="text" name="username" placeholder="请输入一个用户名"><br>
         密码<input type="password" name="pwd"><br>
         性别:男<input type="radio" name="sex"> 女 <input type="radio" name="sex"><br>
         爱好:音乐 <input type="checkbox" name="hib"> 运动 <input type="checkbox" name="hib"> 读书 <input type="checkbox" name="hib"><br>
         上传文件: <input type="file" name="file"> <br>
         编程语言:
                <!-- 下拉列表 select option列表项 -->
                <!-- <option selected> 默认选中-->
                <select name="language">
                    <option>Java</option>
                    <option>JavaScript</option>
                    <option>NodeJS</option>
                    <option>CSS</option>
                </select><br>

        回复:
        <textarea rows="3" cols="20">
                在w3school，你可以找到你所需要的所有的网站建设教程。
                </textarea><br>
        <button>一个普通不具有提交功能的按钮</button>
         <input type="submit">  <input type="reset">
     </form>
</body>
</html>